<template>
    <div class="shadow" v-if="visibleModal" @click="handleShadow">
        <div class="modal">
            <img src="@assets/downModal.png" alt="">
            <div class="close" @click="handleClose"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "downloadModal",
        props: {
            visibleModal: Boolean
        },
        methods: {
            handleClose() {
                this.$parent.toggleDownload()
            },
            handleShadow(event) {
                let modal = document.querySelector(".modal")
                if (modal) {
                    if (!modal.contains(event.target)) {
                        this.handleClose()
                    }
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .shadow {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .4);
        z-index: 99999;
    }
    
    .modal {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 360px;
        
        img {
            width: 100%;
        }
        
        .close {
            width: 360px;
            height: 50px;
            position: absolute;
            bottom: 0;
            cursor: pointer;
        }
    }
</style>
